<div class="SmartStatus-container">
    <div ng-repeat="job in sparkArray track by $index" class='SmartStatus-iconContainer'>
        <a ng-href="{{job.detailsUrl}}"
             aw-tool-tip="{{job.status_tip}}"
             data-tip-watch="job.status_tip"
             aw-tip-placement="left"
             data-original-title=""
             data-trigger="hover"
             data-container="body"
             tooltipInnerClass="SmartStatus-tooltip"
             title="">
                <div class="SmartStatus-icon">
                    <div ng-show="job.status === 'new' || job.status === 'pending' || job.status === 'waiting'"
                        class="SmartStatus-waiting">
                    </div>
                    <div ng-show="job.status === 'running'"
                        class="SmartStatus-running">
                    </div>
                    <div ng-show="job.status === 'failed' || job.status === 'error' || job.status === 'canceled'"
                        class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--bottom">
                    </div>
                    <div class="SmartStatus-iconIndicator"
                        ng-class="{'SmartStatus-iconIndicator--success': job.status === 'successful',
                            'SmartStatus-iconIndicator--failed': (job.status === 'failed' || job.status === 'error' || job.status === 'canceled')}">
                    </div>
                    <div ng-show="job.status === 'successful'"
                        class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--top">
                    </div>
                </div>
        </a>
    </div>
    <div ng-repeat="n in placeholders track by $index" class='SmartStatus-iconContainer'>
        <div class="SmartStatus-iconPlaceholder"></div>
    </div>
</div>
